import React, { useState, useEffect } from "react";
import { connect } from 'react-redux'
import { Table } from 'antd';
import qs from 'qs'
import request from "../../../utils/request";
// const getRandomuserParams = (params) => ({
//     results: params.pagination?.pageSize,
//     page: params.pagination?.current,
//     ...params,
// });
function MovieTable(props) {
    const columns = [
        {
            title: '电影名字',
            dataIndex: 'title',
            sorter: true,
            // render: (name) => `${name.first} ${name.last}`,
            width: '20%',
        },
        {
            title: '电影类型',
            dataIndex: 'videoClass',
            filters: [
                {
                    text: '动作',
                    value: '动作',
                },
                {
                    text: '爱情',
                    value: '爱情',
                },
                {
                    text: '喜剧',
                    value: '喜剧',
                },
                {
                    text: '悬疑',
                    value: '悬疑',
                },
                {
                    text: '剧情',
                    value: '剧情',
                },
                {
                    text: '动画',
                    value: '动画',
                },
                {
                    text: '纪录',
                    value: '纪录',
                },
                {
                    text: '剧集',
                    value: '剧集',
                },
            ],
            // onFilter: (value, record) => record.videoClass.indexOf(value) === 0,

            width: '20%',
        },
        {
            title: '国家',
            dataIndex: 'address',
        },
    ];
    const [data, setData] = useState();
    const [loading, setLoading] = useState(false);
    const [tableParams, setTableParams] = useState({
        pagination: {
            page: 1,
            size: 10,
        },
    });
    // console.log();
    const fetchData = async () => {
        setLoading(true);
        setTableParams({
            ...tableParams,
            pagination: {
                ...tableParams,
                total: 200
            }
        })
        // fetch(`192.168.0.115:5000/api/list/show/category/剧集`)
        //     .then((res) => res.json())
        //     .then(({ results }) => {
        //         console.log(results);
        //         setData(results);
        //         setLoading(false);
        //         setTableParams({
        //             ...tableParams,
        //             pagination: {
        //                 ...tableParams.pagination,
        //                 total: 200,
        //                 // 200 is mock data, you should read it from server
        //                 // total: data.totalCount,
        //             },
        //         });
        //     });
        const movielistAll = await request.get('/list/search', {
            params: {
                ...tableParams.pagination
            }
        })
        // console.log(movielist);
        const movielist = movielistAll.data.movielist.data
        // console.log(movielist);
        movielist.map((item, idx) => {
            item.key = idx
        })
        setData(movielist)
        setLoading(false);

    };

    useEffect(() => {
        fetchData();
    }, []);
    const handleTableChange = (pagination, filters, sorter) => {
        console.log('pagination', pagination);
        setTableParams({
            pagination,
            filters,
            ...sorter,
        });
        // console.log();
    };

    return (
        <Table
            columns={columns}
            rowKey={(data) => {
                // console.log(data.movieID);
                return data.movieID
            }}
            dataSource={data}
            pagination={tableParams.pagination}
            loading={loading}
            onChange={handleTableChange}
        />
    )
}
export default MovieTable